<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 1001;
	-moz-opacity: 0.3;
	opacity: .5;
	filter: alpha(opacity =   80);
}

.white_content {
	display: none;
	position: absolute;
	top: 20%;
	left: 40%;
	width: 20%;
	height: 70%;
	border: 5px solid #536f84;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜事网-用户话题订阅</title>
<jsp:include page="includes.jsp" />
<%@ taglib prefix="s" uri="/struts-tags"%>
<script>
	// wait for the DOM to be loaded     
	$(document).ready(function() {
		$('#myForm').ajaxForm(function() {
			//alert("Thank you for your comment!");
		});
	});
</script>
<%@ page language="java" contentType="text/html;charset=UTF-8"
	import="java.util.*" pageEncoding="utf-8"%>
</head>
<body>
	<div class="wrap">
		<!-- header:start -->
		<jsp:include page="banner.jsp" />
		<!-- header:end -->
		<div id="body">
			<div id="left" class="wrap">
			<h1 class="page">
				<span>用户订阅主题</span>
			</h1>
				<div class="main lside176">
					<jsp:include page="left_banner.jsp" />
					<div class="middle w804">
						<div id="left" class="w804">
							<div class="main">

								<div class="tabContent">
									<div class="listForm">

										<form id="frm" name="frm" method="post" action="saveUserTopic.do" onSubmit="Submit(this)">
											<s:textfield name="topicId" theme="simple" style="display:none" />
											<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
												<tr>
													<td width="220" align=center valign="top">
														<fieldset>
															<legend>未订阅用户</legend>
															<select name="WaitSelectItem" id="WaitSelectItem" size=15
																multiple="true" style="width: 180px;">
																<s:iterator value="users">
																	<option value="${id}">
																		<s:property value="name" />
																	</option>
																</s:iterator>
															</select>
														</fieldset>

													</td>
													<td width="60" align=center>
													<input onclick="MoveSingleItem(WaitSelectItem, SelectedItem)" type="button" value="订阅>" />
													<input onclick="MoveAllItems(WaitSelectItem, SelectedItem)" type="button" value="全部订阅>>" />
													<br/><br/><br/> 
													<input onclick="MoveSingleItem(SelectedItem, WaitSelectItem)" type="button" value="<取消订阅"/>
                                                    <input onclick="MoveAllItems(SelectedItem, WaitSelectItem)" type="button" value="<<全部取消"/>
                                                        </td>
													<td width="220" align=center valign="top"><script>
														
													</script>
														<fieldset>
															<legend>已订阅用户</legend>
															<select name="SelectedItem" id="SelectedItem" size=15
																multiple=true style="width: 180px;">
																<s:iterator value="userTopics">
																	<option value="${user.id}">
																		<s:property value="user.name" />
																	</option>
																</s:iterator>
															</select>
														</fieldset></td>
												</tr>
<!-- 												<s:iterator value="userTopics" status="st">
													<s:if test="#st.index==0">
														<input type="hidden" name="topicId" value="${topic.id}" />
													</s:if>
												</s:iterator>
 -->
												<tr>
													<td colspan=3 align=center><input type="submit"
														id="submit" name="submit" value=" 保存 "/>
														</td>
												</tr>
											</table>
										</form>





									</div>




								</div>
							</div>
						</div>
					</div>
				</div>
				<jsp:include page="footer.jsp" />

				<div class="clear"></div>
			</div>
		</div>
	</div>
	</div>





	<script language="javascript">
		function MoveSingleItem(sel_source, sel_dest) {
			if (sel_source.selectedIndex == -1) //源：没有点选任何项目
				return;
			if (sel_source.options[0].text == "无") //源：只有“无”项目
				return;
			
            //选中的用户
			var SelectedText = sel_source.options[sel_source.selectedIndex].text;
			var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
			
			var newOption = new Option(SelectedText);
			newOption.value = SelectedVal;

			sel_dest.options.add(newOption);
			sel_source.options.remove(sel_source.selectedIndex);
		}

		function MoveAllItems(sel_source, sel_dest) {
			if (sel_source.options[0].text == "无") //源：只有“无”项目
				return;
			if (sel_dest.options[0].text == "无") //目标：只有“无”项目，则先删除该提示性项目
				sel_dest.options.remove(0);

			var sel_source_len = sel_source.length;
			for ( var j = 0; j < sel_source_len; j++) {
				var SelectedText = sel_source.options[j].text;
				var SelectedVal = sel_source.options[j].value;
				var newOption = new Option(SelectedText);
				newOption.value = SelectedVal;
				sel_dest.options.add(newOption);
			}

			//然后删除“源”所有项目：
			while ((k = sel_source.length - 1) >= 0) {
				if (sel_source.options[0].text == "无") //源：只有“无”项目
					break;
				sel_source.options.remove(k);
				if (sel_source.options.length == 0) //源：如果删除完所有有用项目，则添加提示项目：“无”
					sel_source.options.add(new Option("无"));
			}
		}

		function Submit(frm) {
			if (frm.SelectedItem.options[0].text != "无")
				SelectAll(frm.SelectedItem);
			if (frm.WaitSelectItem.options[0].text != "无")
				SelectAll(frm.WaitSelectItem);
			frm.submit();
		}

		function SelectAll(theSel) //选中select中全部项目
		{
			var i;
			for (i = 0; i < theSel.length; i++)
				theSel.options[i].selected = true;
		}
	</script>



</body>
</html>
